{% extends "base.html" %}

{% block title %}示例 - 视频生成系统{% endblock %}

{% block head %}
<style>
    .example-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .example-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .example-icon {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }
    .level-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    .difficulty-basic { background-color: #28a745; }
    .difficulty-intermediate { background-color: #ffc107; color: #000; }
    .difficulty-advanced { background-color: #dc3545; }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-primary text-white rounded p-5 mb-4">
            <h1 class="display-4">
                <i class="fas fa-lightbulb me-3"></i>
                示例中心
            </h1>
            <p class="lead">
                通过示例快速学习如何使用视频生成系统，从基础到高级应用场景
            </p>
            <hr class="my-4 bg-white">
            <p class="mb-0">
                <i class="fas fa-star me-2"></i>
                11个精心设计的示例 •
                <i class="fas fa-star me-2"></i>
                覆盖所有功能 •
                <i class="fas fa-star me-2"></i>
                逐步进阶学习
            </p>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-info-circle me-2 text-primary"></i>
                    如何使用示例
                </h5>
                <ol class="mb-0">
                    <li>选择一个示例类别（基础、中级、高级）</li>
                    <li>点击示例卡片查看详细信息</li>
                    <li>下载或复制示例的Markdown文件</li>
                    <li>上传到主页面进行视频生成</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- 基础示例 -->
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-3">
            <i class="fas fa-seedling me-2 text-success"></i>
            基础示例 (4个)
        </h2>
        <p class="text-muted mb-3">适合初学者，了解基本功能</p>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-basic">基础</span>
            <div class="card-body text-center">
                <i class="fas fa-file-alt example-icon"></i>
                <h5 class="card-title">基础示例</h5>
                <p class="card-text text-muted">最简单的入门示例，展示基本的视频生成流程</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="basic-00">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-basic">基础</span>
            <div class="card-body text-center">
                <i class="fas fa-font example-icon"></i>
                <h5 class="card-title">简单文本</h5>
                <p class="card-text text-muted">纯文本内容的视频生成，适合简单的文档讲解</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="basic-01">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-basic">基础</span>
            <div class="card-body text-center">
                <i class="fas fa-code example-icon"></i>
                <h5 class="card-title">代码示例</h5>
                <p class="card-text text-muted">带有代码高亮的示例，展示技术文档视频制作</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="basic-02">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-basic">基础</span>
            <div class="card-body text-center">
                <i class="fas fa-square-root-alt example-icon"></i>
                <h5 class="card-title">数学公式</h5>
                <p class="card-text text-muted">包含LaTeX数学公式的学术类视频示例</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="basic-03">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 中级示例 -->
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-3">
            <i class="fas fa-layer-group me-2 text-warning"></i>
            中级示例 (3个)
        </h2>
        <p class="text-muted mb-3">学习更复杂的功能和配置选项</p>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-intermediate">中级</span>
            <div class="card-body text-center">
                <i class="fas fa-clone example-icon"></i>
                <h5 class="card-title">多场景视频</h5>
                <p class="card-text text-muted">包含多个场景的复杂视频，学会组织内容结构</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="intermediate-04">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-intermediate">中级</span>
            <div class="card-body text-center">
                <i class="fas fa-paint-brush example-icon"></i>
                <h5 class="card-title">主题视频</h5>
                <p class="card-text text-muted">使用不同主题风格的视频，定制化视觉效果</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="intermediate-05">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-intermediate">中级</span>
            <div class="card-body text-center">
                <i class="fas fa-video example-icon"></i>
                <h5 class="card-title">高质量视频</h5>
                <p class="card-text text-muted">使用高质量设置生成专业级教学视频</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="intermediate-06">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 高级示例 -->
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-3">
            <i class="fas fa-rocket me-2 text-danger"></i>
            高级示例 (4个)
        </h2>
        <p class="text-muted mb-3">掌握高级功能，实现复杂应用场景</p>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-advanced">高级</span>
            <div class="card-body text-center">
                <i class="fas fa-project-diagram example-icon"></i>
                <h5 class="card-title">完整工作流</h5>
                <p class="card-text text-muted">从输入到输出的完整自动化工作流示例</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="advanced-07">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-advanced">高级</span>
            <div class="card-body text-center">
                <i class="fas fa-save example-icon"></i>
                <h5 class="card-title">断点续跑</h5>
                <p class="card-text text-muted">长时间任务的断点保存和恢复机制</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="advanced-08">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-advanced">高级</span>
            <div class="card-body text-center">
                <i class="fas fa-tasks example-icon"></i>
                <h5 class="card-title">批量生成</h5>
                <p class="card-text text-muted">同时处理多个文件，提高工作效率</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="advanced-09">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card example-card h-100 position-relative">
            <span class="badge level-badge difficulty-advanced">高级</span>
            <div class="card-body text-center">
                <i class="fas fa-vial example-icon"></i>
                <h5 class="card-title">集成测试</h5>
                <p class="card-text text-muted">完整的测试和验证流程，确保质量</p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="#" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" data-example="advanced-10">
                    <i class="fas fa-eye me-2"></i>查看详情
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 快速开始 -->
<div class="row">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-rocket me-2 text-primary"></i>
                    快速开始
                </h5>
                <p class="card-text">
                    想要立即开始？推荐您从 <strong>基础示例</strong> 开始，然后逐步尝试中级和高级示例。
                    每个示例都包含详细的说明和完整的Markdown文件。
                </p>
                <div class="mt-3">
                    <a href="/" class="btn btn-primary">
                        <i class="fas fa-upload me-2"></i>
                        立即上传文件
                    </a>
                    <a href="/api/config" class="btn btn-outline-secondary ms-2" target="_blank">
                        <i class="fas fa-cog me-2"></i>
                        查看配置选项
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- 示例详情模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    <i class="fas fa-info-circle me-2"></i>
                    示例详情
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="exampleModalBody">
                <div class="text-center p-5">
                    <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-3">加载中...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="downloadExampleBtn">
                    <i class="fas fa-download me-2"></i>
                    下载示例
                </button>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
// 示例数据
const exampleData = {
    'basic-00': {
        title: '基础示例',
        level: '基础',
        description: '最简单的入门示例，展示基本的视频生成流程。适合第一次使用系统的新手用户。',
        features: ['基本文本', '简单场景', '默认配置'],
        code: `# 欢迎使用视频生成系统

这是一个最简单的示例，演示如何将Markdown文档转换为视频。

## 主要特点

- 简单易懂
- 快速上手
- 无需复杂配置

## 开始使用

只需上传这个文件到系统，点击生成即可！
`
    },
    'basic-01': {
        title: '简单文本',
        level: '基础',
        description: '纯文本内容的视频生成，适合简单的文档讲解和说明。',
        features: ['纯文本', '标准格式', '清晰讲解'],
        code: `# Python基础教程

Python是一种简单易学的编程语言。

## 变量和数据类型

\`\`\`python
name = "张三"
age = 25
is_student = True
\`\`\`

## 基本运算

\`\`\`python
# 算术运算
result = 10 + 5  # 15
result = 20 - 8  # 12
\`\`\`

## 总结

Python语法简洁，适合初学者入门编程。
`
    },
    'basic-02': {
        title: '代码示例',
        level: '基础',
        description: '带有代码高亮的示例，展示技术文档视频制作。',
        features: ['代码高亮', '技术文档', '语法展示'],
        code: `# JavaScript函数示例

## 定义函数

\`\`\`javascript
function greet(name) {
    return \`Hello, \${name}!\`;
}
\`\`\`

## 使用函数

\`\`\`javascript
// 调用函数
const message = greet('World');
console.log(message); // 输出: Hello, World!
\`\`\`

## 箭头函数

\`\`\`javascript
const add = (a, b) => a + b;
console.log(add(5, 3)); // 输出: 8
\`\`\`
`
    },
    'basic-03': {
        title: '数学公式',
        level: '基础',
        description: '包含LaTeX数学公式的学术类视频示例。',
        features: ['LaTeX公式', '学术内容', '公式渲染'],
        code: `# 数学公式示例

## 基本运算

质能方程：$E = mc^2$

## 二次方程

二次方程 $ax^2 + bx + c = 0$ 的解：

$$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$

## 积分

定积分公式：

$$\\int_a^b f(x)dx = F(b) - F(a)$$

其中 $F(x)$ 是 $f(x)$ 的原函数。

## 总结

数学公式是学术视频的重要组成部分。
`
    },
    'intermediate-04': {
        title: '多场景视频',
        level: '中级',
        description: '包含多个场景的复杂视频，学会组织内容结构。',
        features: ['多场景', '内容组织', '结构化'],
        code: `# 云原生架构实践

## 场景1：什么是云原生

云原生是一套技术体系和方法论。

### 核心要素
- 容器化
- 微服务
- DevOps

---

## 场景2：容器化部署

使用Docker容器化应用：

\`\`\`dockerfile
FROM node:16
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]
\`\`\`

---

## 场景3：微服务架构

将单体应用拆分为微服务：

- 用户服务
- 订单服务
- 支付服务
- 商品服务

---

## 场景4：Kubernetes编排

使用K8s管理容器：

\`\`\`yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-app
\`\`\`

---

## 总结

云原生是现代应用开发的重要方向。
`
    },
    'intermediate-05': {
        title: '主题视频',
        level: '中级',
        description: '使用不同主题风格的视频，定制化视觉效果。',
        features: ['主题定制', '视觉风格', '品牌化'],
        code: `# 技术分享：深度学习

## 什么是深度学习

深度学习是机器学习的一个分支。

## 神经网络基础

### 感知机模型
$$y = f(\\sum_{i=1}^n w_i x_i + b)$$

### 反向传播
通过梯度下降优化网络权重：

$$\\frac{\\partial L}{\\partial w} = \\frac{\\partial L}{\\partial y} \\cdot \\frac{\\partial y}{\\partial w}$$

## 常用网络结构

### CNN（卷积神经网络）
用于图像识别任务。

### RNN（循环神经网络）
用于序列数据处理。

## 实际应用

- 图像识别
- 自然语言处理
- 语音识别
- 推荐系统

## 未来展望

深度学习将继续推动AI技术的发展。
`
    },
    'intermediate-06': {
        title: '高质量视频',
        level: '中级',
        description: '使用高质量设置生成专业级教学视频。',
        features: ['高质量输出', '专业设置', '最佳实践'],
        code: `# Kubernetes深度实践

## 简介

Kubernetes（K8s）是容器编排平台的事实标准。

## 核心概念

### Pod
最小部署单元，包含一个或多个容器。

### Service
提供稳定的网络访问端点。

### Deployment
管理Pod的创建和更新。

## 高级特性

### 滚动更新

\`\`\`yaml
strategy:
  type: RollingUpdate
  rollingUpdate:
    maxSurge: 1
    maxUnavailable: 0
\`\`\`

### 健康检查

\`\`\`yaml
livenessProbe:
  httpGet:
    path: /healthz
    port: 8080
  initialDelaySeconds: 30
  periodSeconds: 10
\`\`\`

### 资源限制

\`\`\`yaml
resources:
  requests:
    memory: "64Mi"
    cpu: "250m"
  limits:
    memory: "128Mi"
    cpu: "500m"
\`\`\`

## 最佳实践

1. 使用命名空间隔离环境
2. 配置资源限制
3. 使用ConfigMap和Secret
4. 实施网络策略
5. 启用RBAC权限控制

## 总结

掌握K8s是现代运维工程师的必备技能。
`
    },
    'advanced-07': {
        title: '完整工作流',
        level: '高级',
        description: '从输入到输出的完整自动化工作流示例。',
        features: ['自动化', '端到端', '工作流'],
        code: `# DevOps工作流实践

## 概述

完整的DevOps工作流包括：规划→开发→测试→部署→监控。

## 第一阶段：代码规划

### 用户故事
作为开发团队，我们希望有一个标准化的部署流程，以便：

- 快速交付功能
- 减少人为错误
- 提高代码质量

### 验收标准
- 自动化测试覆盖率 > 80%
- 部署时间 < 5分钟
- 回滚时间 < 2分钟

---

## 第二阶段：持续开发

### Git工作流

\`\`\`bash
# 创建特性分支
git checkout -b feature/new-functionality

# 开发并提交
git add .
git commit -m "feat: add new functionality"

# 推送到远程
git push origin feature/new-functionality

# 创建Pull Request
\`\`\`

### 代码规范

使用ESLint和Prettier确保代码质量。

---

## 第三阶段：持续测试

### 单元测试

\`\`\`javascript
describe('UserService', () => {
  test('should create user', async () => {
    const user = await createUser({
      name: 'John Doe',
      email: 'john@example.com'
    });
    expect(user.id).toBeDefined();
  });
});
\`\`\`

### 集成测试

测试API端点、数据库交互和第三方服务集成。

---

## 第四阶段：持续部署

### CI/CD Pipeline

\`\`\`yaml
# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npm test
      - name: Build
        run: npm run build
      - name: Deploy
        run: npm run deploy
\`\`\`

### 自动化部署

1. 自动构建Docker镜像
2. 推送到镜像仓库
3. 更新Kubernetes部署
4. 执行烟雾测试

---

## 第五阶段：持续监控

### 监控指标

- 应用性能（响应时间、吞吐量）
- 错误率
- 资源使用率（CPU、内存）
- 业务指标（用户活跃度、转化率）

### 告警策略

\`\`\`yaml
alerts:
  - name: HighErrorRate
    condition: error_rate > 5%
    duration: 5m
    severity: critical
  - name: HighResponseTime
    condition: response_time > 1000ms
    duration: 10m
    severity: warning
\`\`\`

---

## 总结

DevOps工作流通过自动化和持续改进，提高软件交付效率和质量。
`
    },
    'advanced-08': {
        title: '断点续跑',
        level: '高级',
        description: '长时间任务的断点保存和恢复机制。',
        features: ['断点续传', '任务恢复', '状态保存'],
        code: `# 长视频生成任务示例

## 概述

对于较长的Markdown文档，生成视频可能需要较长时间。本示例展示如何使用断点续跑功能。

## 配置断点

在生成配置中启用断点功能：

\`\`\`yaml
checkpoint:
  enabled: true
  interval: 30  # 每30秒保存一次
  path: ./checkpoints
\`\`\`

## 示例场景

### 第一阶段：文档解析 (已完成)

- 解析Markdown文件 ✓
- 提取文本内容 ✓
- 识别代码块 ✓
- 识别数学公式 ✓

### 第二阶段：内容分段 (已完成)

- 识别章节标题 ✓
- 分段处理 ✓
- 生成场景描述 ✓

### 第三段：生成音频 (中断)

- [✓] 场景1音频生成
- [✓] 场景2音频生成
- [⏸] 场景3音频生成 - **中断点**
- [ ] 场景4音频生成
- [ ] 场景5音频生成
- [ ] 场景6音频生成

### 第四段：视频渲染 (等待)

- [ ] 场景1视频合成
- [ ] 场景2视频合成
- [ ] 场景3视频合成
- [ ] 场景4视频合成
- [ ] 场景5视频合成
- [ ] 场景6视频合成

### 第五段：最终输出 (等待)

- [ ] 合并所有场景
- [ ] 添加过渡效果
- [ ] 输出最终视频

## 恢复任务

从断点恢复任务：

\`\`\`bash
# 使用任务ID恢复
python generate.py --resume task-12345

# 或者使用断点文件
python generate.py --checkpoint ./checkpoints/checkpoint-12345.json
\`\`\`

## 断点文件内容

断点文件包含：
- 任务ID和状态
- 已完成的步骤
- 当前进度
- 临时文件位置
- 配置参数

## 注意事项

1. 断点文件定期保存
2. 重启后自动检测未完成任务
3. 支持手动恢复和取消
4. 临时文件清理机制

## 总结

断点续跑功能使长时间任务更加可靠和高效。
`
    },
    'advanced-09': {
        title: '批量生成',
        level: '高级',
        description: '同时处理多个文件，提高工作效率。',
        features: ['批量处理', '并行执行', '队列管理'],
        code: `# 批量视频生成示例

## 概述

批量生成功能允许同时处理多个Markdown文件，大幅提高工作效率。

## 使用场景

- 课程视频制作
- 文档系列视频
- 多语言内容生成
- 团队协作项目

## 批量处理流程

### 第一步：准备文件

将所有Markdown文件放入指定目录：

\`\`\`
/batch-input/
  ├── lesson-01.md
  ├── lesson-02.md
  ├── lesson-03.md
  ├── lesson-04.md
  └── lesson-05.md
\`\`\`

### 第二步：创建批量配置

\`\`\`yaml
# batch-config.yaml
batch:
  input_dir: ./batch-input
  output_dir: ./batch-output
  max_parallel: 3  # 最大并发数
  retry_count: 3   # 失败重试次数

settings:
  quality: high
  theme: academic
  resolution: 1920x1080
  fps: 30
\`\`\`

### 第三步：执行批量生成

\`\`\`bash
# 启动批量处理
python generate_batch.py --config batch-config.yaml

# 或者指定文件列表
python generate_batch.py --files file1.md file2.md file3.md
\`\`\`

## 并行处理策略

### 队列管理

```
任务队列
├─ 任务1 (lesson-01) ─┐
├─ 任务2 (lesson-02) ─┤
├─ 任务3 (lesson-03) ─┼─> 工作者池 (3个并发)
├─ 任务4 (lesson-04) ─�
└─ 任务5 (lesson-05) ─┘
```

### 资源限制

- CPU使用率 < 80%
- 内存使用 < 4GB
- 并发任务数可配置

## 监控和报告

### 进度显示

\`\`\`
[1/5] lesson-01.md  ████████░░ 80%  [完成]
[2/5] lesson-02.md  ██████████ 100% [完成]
[3/5] lesson-03.md  ██████░░░░ 60%  [进行中]
[4/5] lesson-04.md  ░░░░░░░░░░ 0%   [等待中]
[5/5] lesson-05.md  ░░░░░░░░░░ 0%   [等待中]

总体进度: 3/5 完成 (60%)
预计剩余时间: 8分钟
\`\`\`

### 错误处理

对于失败的任务：
1. 自动重试 (最多3次)
2. 记录错误日志
3. 生成错误报告
4. 跳过继续处理其他任务

## 批量处理统计

### 成功案例

- 5个文件全部成功
- 平均每个视频: 3分钟
- 总用时: 约6分钟
- 并发效率提升: 60%

### 失败处理

- lesson-03.md: 解析错误 (重试2次后成功)
- 错误原因: 文件编码问题
- 解决方案: 重新保存为UTF-8编码

## 高级功能

### 任务依赖

支持任务间依赖关系：

\`\`\`yaml
dependencies:
  - lesson-01.md → lesson-02.md
  - lesson-02.md → lesson-03.md
\`\`\`

### 模板应用

可以应用不同的模板：

\`\`\`yaml
templates:
  lesson-*.md: academic
  guide-*.md: presentation
  tutorial-*.md: dark
\`\`\`

## 总结

批量生成功能大幅提高了视频制作的效率，特别适合需要制作系列内容的场景。
`
    },
    'advanced-10': {
        title: '集成测试',
        level: '高级',
        description: '完整的测试和验证流程，确保质量。',
        features: ['集成测试', '质量保证', '自动化验证'],
        code: `# 集成测试与质量保证

## 概述

完整的测试流程确保视频生成系统的稳定性和可靠性。

## 测试框架

### 测试分类

1. **单元测试** (Unit Tests)
   - 测试单个模块
   - 快速执行
   - 高覆盖率

2. **集成测试** (Integration Tests)
   - 测试模块间交互
   - 验证端到端功能

3. **性能测试** (Performance Tests)
   - 评估系统性能
   - 压力测试
   - 资源使用分析

## 单元测试示例

### Markdown解析器测试

\`\`\`python
import unittest
from parsers.markdown_parser import MarkdownParser

class TestMarkdownParser(unittest.TestCase):
    def setUp(self):
        self.parser = MarkdownParser()

    def test_parse_simple_text(self):
        md = "# Title\\nThis is a test."
        result = self.parser.parse(md)
        self.assertEqual(result['title'], 'Title')
        self.assertEqual(len(result['scenes']), 1)

    def test_parse_code_block(self):
        md = "\\\`\\\`\\\`python\\nprint('hello')\\n\\\`\\\`\\\`"
        result = self.parser.parse(md)
        self.assertTrue(any('code' in scene for scene in result['scenes']))

    def test_parse_math_formula(self):
        md = "E = mc\\\\^2"
        result = self.parser.parse(md)
        self.assertTrue(any('formula' in scene for scene in result['scenes']))

if __name__ == '__main__':
    unittest.main()
\`\`\`

## 集成测试示例

### 端到端测试

\`\`\`python
import unittest
import tempfile
import os
from pathlib import Path
from core.pipeline import VideoPipeline

class TestVideoPipeline(unittest.TestCase):
    def setUp(self):
        self.pipeline = VideoPipeline()
        self.temp_dir = tempfile.mkdtemp()

    def test_end_to_end_generation(self):
        # 准备测试文件
        md_content = """
# Test Video
This is a test.

## Section 1
Content here.

\`\`\`python
print("Hello")
\`\`\`
"""
        md_file = Path(self.temp_dir) / "test.md"
        md_file.write_text(md_content)

        # 执行生成
        config = {
            'quality': 'preview',
            'theme': 'dark',
            'resolution': '1280x720'
        }
        result = self.pipeline.generate(str(md_file), config)

        # 验证结果
        self.assertEqual(result['status'], 'completed')
        self.assertTrue(Path(result['output_path']).exists())
        self.assertGreater(result['video_duration'], 0)

    def test_error_handling(self):
        # 测试无效文件
        with self.assertRaises(ValueError):
            self.pipeline.generate("nonexistent.md", {})

    def tearDown(self):
        # 清理临时文件
        import shutil
        shutil.rmtree(self.temp_dir)
\`\`\`

## 性能测试示例

### 负载测试

\`\`\`python
import time
import concurrent.futures
from core.pipeline import VideoPipeline

def test_concurrent_generation():
    pipeline = VideoPipeline()
    tasks = []

    # 创建10个并发任务
    for i in range(10):
        tasks.append(f"test-{i}.md")

    start_time = time.time()

    # 并发执行
    with concurrent.futures.ThreadPoolExecutor(max_workers=3) as executor:
        futures = {
            executor.submit(pipeline.generate, task, {}): task
            for task in tasks
        }

        for future in concurrent.futures.as_completed(futures):
            task = futures[future]
            try:
                result = future.result()
                print(f"Task {task} completed")
            except Exception as e:
                print(f"Task {task} failed: {e}")

    end_time = time.time()
    print(f"Total time: {end_time - start_time:.2f}s")
    print(f"Average time per task: {(end_time - start_time) / len(tasks):.2f}s")
\`\`\`

## 自动化测试流程

### CI/CD集成

\`\`\`yaml
# .github/workflows/test.yml
name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Python
        uses: actions/setup-python@v2
        with:
          python-version: 3.9

      - name: Install dependencies
        run: |
          pip install -r requirements.txt
          pip install pytest pytest-cov

      - name: Run unit tests
        run: pytest tests/unit/ --cov=core --cov-report=xml

      - name: Run integration tests
        run: pytest tests/integration/ -v

      - name: Run performance tests
        run: pytest tests/performance/ --benchmark-only

      - name: Upload coverage
        uses: codecov/codecov-action@v1
\`\`\`

## 测试报告

### 代码覆盖率

```
Name                     Stmts   Miss  Cover
--------------------------------------------
core/pipeline.py           150     10    93%
parsers/markdown_parser    120      5    96%
video/renderer.py          200     20    90%
--------------------------------------------
TOTAL                      470     35    93%
```

### 测试统计

- 单元测试: 150个通过
- 集成测试: 25个通过
- 性能测试: 10个通过
- 总覆盖率: 93%

## 质量保证措施

1. **代码审查** (Code Review)
   - 所有代码必须通过审查
   - 至少2人批准才能合并

2. **自动化测试**
   - 每次提交自动运行测试
   - 必须100%通过才能合并

3. **性能基准**
   - 视频生成时间 < 2分钟
   - 内存使用 < 2GB
   - 错误率 < 0.1%

4. **持续监控**
   - 生产环境监控
   - 错误日志收集
   - 性能指标追踪

## 总结

完整的测试体系是保证系统质量的关键。通过自动化测试、持续集成和监控，确保系统的稳定性和可靠性。
`
    }
};

// 模态框事件
document.getElementById('exampleModal').addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    const exampleId = button.getAttribute('data-example');
    const data = exampleData[exampleId];

    if (!data) {
        document.getElementById('exampleModalBody').innerHTML = `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                示例数据加载中，请稍后再试...
            </div>
        `;
        return;
    }

    const modalBody = document.getElementById('exampleModalBody');
    modalBody.innerHTML = `
        <h4>${data.title}</h4>
        <span class="badge bg-${getLevelColor(data.level)} mb-3">${data.level}</span>
        <p class="text-muted">${data.description}</p>

        <h5 class="mt-4">主要特点</h5>
        <ul class="list-unstyled">
            ${data.features.map(f => `<li><i class="fas fa-check text-success me-2"></i>${f}</li>`).join('')}
        </ul>

        <h5 class="mt-4">示例代码</h5>
        <pre style="max-height: 400px; overflow-y: auto;"><code>${escapeHtml(data.code)}</code></pre>
    `;

    // 设置下载按钮
    const downloadBtn = document.getElementById('downloadExampleBtn');
    downloadBtn.onclick = function() {
        downloadExample(exampleId, data);
    };
});

function getLevelColor(level) {
    const colors = {
        '基础': 'success',
        '中级': 'warning',
        '高级': 'danger'
    };
    return colors[level] || 'secondary';
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function downloadExample(exampleId, data) {
    // 使用真实的示例文件API
    const downloadUrl = `/api/download-example/${exampleId}`;

    // 创建下载链接并点击
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = '';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    // 关闭模态框
    const modal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
    modal.hide();
}
</script>
{% endblock %}
